
<%@ page contentType="text/html;charset=utf-8" %> 
<%@ page language="java" import="java.sql.*" %> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.2.min.js" language="JavaScript"></script>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>选择社区</title>


<style>
*{margin:0 ;padding:0}
input{
                border: 1px solid #ccc;
                padding: 7px 0px;
                border-radius: 3px;
                padding-left:5px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
            }
            input:focus{
                    border-color: #66afe9;
                    outline: 0;
                    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
            }
			.sq{
			 border:1px solid #f0f0f0;
		     font-size:28px; 
			 height:50px; width:100%;
			 margin-top:2px;
		      }
			 .sq_left{
			     margin-left:3px;
			 width:52px;
			 float:left; 
			 }
			 .sq_right{
			 width:80%;
			 float:left; 
			 }
		.txt1{   
		    font-size:14px;
			margin-top:10px;	
        }
		.txt2{  
		     font-size:13px;
			 margin-top:8px;
			 color:#7F7F7F;
        }  
</style>
</head>


   <div style="border:2px solid #f0f0f0; height:30px; width:100%">
         <div style="width:10%; float:left; margin-top:5px">  <img   onclick="backs()"  src="image/back.png"  height="20px;"  /></div>
	     <div style="width:90%;  text-align:center ;float:left; font-size:20px;margin-top:5px"> 选择社区</div>
  </div>
  <div  id="search" style="margin-top:5px;">
<input  style="width:100%;height:20px;  " placeholder="卫生服务中心"/>
</div>
<div    id="app-4"   >
    <div class="sq"       v-for="(todo,index) in todos" :key="index"  @click="click(index)" >
    <div id="sq_left"   class="sq_left"> <img :src="todo.picture" style="height:50px; width:50px;"  /> </div>
    <div  id="sq_right"  class="sq_right">
	<div class="txt1"   >      {{todo.name}}</div>
	<div class="txt2">  {{todo.address}} </div>
	</div>
	
</div>
	
<body>
</body>
</html>
<script>
     history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });
function backs(){
location='index.html'; 


}


window.onload=function(){ 
//document.getElementById('aa').innerHTML= "";
var aj = $.ajax( {    
    url:'/QueyServlet',
    type:'get',    
    cache:false,  
	data:{op:'sqfwzx'},  
    dataType:'json',    
    success:function(msg) { 
	if(msg.result=="ok"){
	var app4 = new Vue({
     el: '#app-4',
    data: {
     todos: msg.data  
  } ,
  methods: {
    click: function(index) {

      var id ="sq"+this.todos[index].id;
	location="doctor.jsp?sqfwzx_id="+id+""; 
    }
  }
})
	  // var data=msg.data;
//	    for(var i=0 ;i<data.length;i++)  { 
//	       var  oDiv = document.createElement('div');
//			oDiv.className ='sq';
//            oDiv.id ='sq'+data[i].id;
//			oDiv.onclick=function(){
//			location="doctor.jsp?sqfwzx_id="+this.id+""; 
//			};
//            document.getElementById("aa").appendChild(oDiv);
//				
//	       var  sq_left=document.createElement('div');
//	       sq_left.className='sq_left'
//		   oDiv.appendChild(sq_left);
//		   
//	      var  img=document.createElement('img');
//	       img.style.height='170px'
//		   img.style.width='170px'
//	       img.src= data[i].picture;
//		   sq_left.appendChild(img);
//		   
//	     var sq_right=document.createElement('div');
//	      sq_right.className='sq_right'
//		  oDiv.appendChild(sq_right);
//		  
//	     var txt1=document.createElement('div');
//	      txt1.className ='txt1';
//		  txt1.innerHTML = data[i].name;
//		  sq_right.appendChild(txt1);
//		  
//         var txt2=document.createElement('div');
//	      txt2.className ='txt2';
//		  txt2.innerHTML =  data[i].address;
//		  sq_right.appendChild(txt2);
//		  }
	}  
     },    
     error : function() 
	 {     
         alert("异常！");    
    }    
});

}

function objclick(){
alert()
//location='index.html'; 


};
</script>